<template>
  <div class="container" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'

// 1.安装cesium
// 2、讲cesium目录下的Build/Cesium 的四个目录拷贝倒public

// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2)

const cesiumContainer = ref(null)

onMounted(() => {
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    infoBox: false, // 关闭信息框
    geocoder: false, // 关闭搜索
    homeButton: false, // home按钮
    sceneModePicker: false, // 场景查看器的场景模式
    baseLayerPicker: false, // 图层选择器
    navigationHelpButton: false, // 帮助按钮
    animation: false, // 动画播放
    timeline: false, //时间轴
    fullscreenButton: false, // 全屏按
  })

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'

  // 1.屏幕坐标系统，二维笛卡尔坐标系。Cartesian2类型
  // 2.地理坐标系统，三维的 WGS-84 坐标系，Cartographic 类型，椭球体
  // 3.笛卡尔空间直角坐标系，cartesian3类型

  // 角度弧度转换
  // const radians = Cesium.Math.toRadians(90)
  // console.log(radians)

  // 弧度转角度
  // const degress = Cesium.Math.toDegrees(2 * Math.PI)
  // console.log(degress)

  // 经纬度转换为笛卡尔坐标系(经度, 纬度, 高度)
  const cartesian3 = Cesium.Cartesian3.fromDegrees(89.5, 20.4, 100)
  console.log(cartesian3)
  const cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
  console.log(cartographic)
})
</script>
